<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用情况</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="cont1">
        <div class="tab border">
            <p>未使用券码</p>
            <p>已使用券码</p>
        </div>
        <div class="userInfo1 ab">
            <h4 class="title border">上海静安店</h4>
            <table class="info_wrap">
                <tr>
                    <td>顾客姓名</td>
                    <td>手机号码</td>
                    <td>购买时间</td>
                </tr>
                <tr>
                    <td>马冬梅</td>
                    <td>13439483928</td>
                    <td>2018.01.10</td>
                </tr>
                <tr>
                    <td>马冬梅</td>
                    <td>13439483928</td>
                    <td>2018.01.10</td>
                </tr>
                <tr>
                    <td>马冬梅</td>
                    <td>13439483928</td>
                    <td>2018.01.10</td>
                </tr>
                <tr>
                    <td>马冬梅</td>
                    <td>13439483928</td>
                    <td>2018.01.10</td>
                </tr>
                <tr>
                    <td>马冬梅</td>
                    <td>13439483928</td>
                    <td>2018.01.10</td>
                </tr>
                <tr>
                    <td>马冬梅</td>
                    <td>13439483928</td>
                    <td>2018.01.10</td>
                </tr>
                <tr>
                    <td>马冬梅</td>
                    <td>13439483928</td>
                    <td>2018.01.10</td>
                </tr>
                <tr>
                    <td>马冬梅</td>
                    <td>13439483928</td>
                    <td>2018.01.10</td>
                </tr>
                <tr>
                    <td>马冬梅</td>
                    <td>13439483928</td>
                    <td>2018.01.10</td>
                </tr>
                <tr>
                    <td>马冬梅</td>
                    <td>13439483928</td>
                    <td>2018.01.10</td>
                </tr>
            </table>
        </div>
        <div class="userInfo2 ab">
            <h4 class="title border">上海世纪公园店</h4>
            <table class="info_wrap">
                <tr>
                    <td>顾客姓名</td>
                    <td>手机号码</td>
                    <td>购买时间</td>
                </tr>
                <tr>
                    <td>马冬梅</td>
                    <td>13439483928</td>
                    <td>2018.01.10</td>
                </tr>
            </table>
        </div>
        <div class="bottom">
            <img src="img/top.png" />
        </div>
    </div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/index.js"></script>
<script>
    $(".tab p").on("click", function () {
        if ($(this).text() == "未使用券码") {
            $(".userInfo1").show();
            $(".userInfo2").hide();
        } else {
            $(".userInfo2").show();
            $(".userInfo1").hide();
        }
        $(this).css("color", "#ff9340");
        $(this).css("border-bottom", "2px solid #ff9340");
        $(this).siblings().css("color", "#666");
        $(this).siblings().css("border-bottom", "none");
    });
</script>

</html>